define(function(require, exports, module) {

  // var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  // var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');

  var echarts = require('abc/js/echarts')
  var chartData = require('v/graph/option/line')
  var drag = require('hy5b/frontend/drag/index')
  require('css!hy5b/frontend/drag/drag.css');

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);

    var util = {
      //最小不缩放的尺寸
      WIDTH_THRESHOLD: 350,
      HEIGHT_THRESHOLD: 100,
      //放大时字体缩放相对于宽度缩放的比例
      FONT_ZOOM_UP_STEP: 0.3,
      //缩小时字体缩放相对于宽度缩放的比例
      FONT_ZOOM_DOWN_STEP: 0.8,

      //仪表盘色条宽度相对于宽度缩放的比例
      GUAGE_AXIS_LINE_STEP: 0.5,

      //仪表盘指示刻度值距色条的距离相对于宽度缩放的比例
      GUAGE_SPLIT_LINE_STEP: 0.2,

      PIE_LEGEND_RIGHT_STEP: 1,

      //计算基于基准尺寸的缩放比例
      //基准尺寸：用户不设置字体大小时默认的缩放阈值尺寸，如果用户自行设置了字体大小，则以当前的尺寸作为下次缩放时的基准尺寸
      calculateZoom: function(width, height, baseWidth, baseHeight) {
        return Math.min(width / baseWidth, height / baseHeight);
      },

      getScale: function(zoom, coefficient) {
        if (zoom < 1) {
          return (1 - (1 - zoom) * coefficient);
        } else {
          return (1 + (zoom - 1) * coefficient);
        }
      }
    }

    var chart = echarts.init(document.getElementById('chart'));

    $('#render').click(function() {
      var _width = $('#box').width();
      var _height = $('#box').height();
      chart.clear()
      render(_width, _height);
    });

    function render(width, height) {
      this.el = document.getElementById('chart');
      this.chart = chart;
      this.option = chartData;

      let fontSize;
      let chartWidth = width;
      let chartHeight = height;

      if (chartWidth && chartHeight) {
        let zoom = util.calculateZoom(width, height, util.WIDTH_THRESHOLD, util.HEIGHT_THRESHOLD);

        if (zoom < 1) {
          let scale = util.getScale(zoom, util.FONT_ZOOM_DOWN_STEP);
          let exceptWidth = width / scale;
          let exceptHeight = height / scale;

          chartWidth = exceptWidth;
          chartHeight = exceptHeight;

          let offsetX = (width - exceptWidth) / 2 / scale;
          let offsetY = (height - exceptHeight) / 2 / scale;
          this.el.style.transform = 'scale(' + scale + ') translate(' + offsetX + 'px, ' + offsetY + 'px)';
          fontSize = 12; //系数
        } else {
          fontSize = 12 * util.getScale(zoom, util.FONT_ZOOM_UP_STEP);
          this.el.style.transform = 'scale(1) translate(0, 0)';
        }

        this.el.style.width = chartWidth + 'px';
        this.el.style.height = chartHeight + 'px';

        this.chart.resize();

        let option = this.option;

        $.each(option.series, function(index, serie) {
          $.extend(true, serie, {
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                width: 6 * util.getScale(zoom, util.GUAGE_AXIS_LINE_STEP)
              }
            },

            title: {
              textStyle: {
                fontSize: fontSize
              }
            },

            splitLine: {
              length: -30 * util.getScale(zoom, util.GUAGE_SPLIT_LINE_STEP)
            }
          });
        })

        $.extend(true, option, {
          textStyle: {
            fontSize: fontSize
          },
          tooltip: {
            textStyle: {
              fontSize: fontSize
            }
          },
          legend: {
            padding: [0, 20 * util.getScale(zoom, util.PIE_LEGEND_RIGHT_STEP), 0, 0]
          }
        });
        this.chart.setOption(option);
      }

    }

    var _width = $('#chart').width();
    var _height = $('#chart').height();

    render(_width, _height);

    drag(document.getElementById('box'), function() {
      var width = $('#box').width();
      var height = $('#box').height();
      render(width, height);
    });
  }

  return main;
})
